<template>
  <div class="wp-box">
    <!-- 安装 -->
    <div class="tree-1">
      <el-tree
        :data="data"
        show-checkbox
        :default-expanded-keys="[1]"
        :default-checked-keys="EchoList"
        :expand-on-click-node="false"
        node-key="id"
        @check="treeChange"
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <div class="tree-2">
      <el-tree
        :data="data2"
        show-checkbox
        :default-expanded-keys="[1]"
        :default-checked-keys="EchoListTwo"
        :expand-on-click-node="false"
        node-key="id"
        @check="treeChangeTwo"
        :props="defaultProps"
      >
      </el-tree>
    </div>
  </div>
</template>
  
  <script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "",
  components: {},
  data() {
    return {
      EchoList: [],
      EchoListTwo: [],
      data: [
        {
          id: 1,
          label: "零件提示",
          children: [
            {
              id: 1 - 1,
              label: "显示零件名称",
            },
          ],
        },
      ],
      data2: [
        {
          id: 2,
          label: "参考资料",
          children: [
            {
              id: 2 - 1,
              label: "安装步骤",
            },
            {
              id: 2 - 2,
              label: "安装说明",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      InstallConfig: {
        ShowName: false,
        ShowStep: false,
        ShowTip: false,
      },
    };
  },
  created() {
    this.EchoList = JSON.parse(sessionStorage.getItem("EchoList")) || [];
    this.EchoListTwo = JSON.parse(sessionStorage.getItem("EchoListTwo")) || [];
    
    if (this.EchoList[0] == 1) {
      this.InstallConfig.ShowName = true;
    }
    if (this.EchoListTwo[0] == 1) {
      this.InstallConfig.ShowStep = true;
      if (this.EchoListTwo[1] == 0) {
        this.InstallConfig.ShowTip = true;
      }
    }
    if (this.EchoListTwo[0] == [0]) {
      this.InstallConfig.ShowTip = true;
    }
  },
  methods: {
    treeChange(data, node, elem) {
      console.log(node.checkedKeys);
      if (node.checkedKeys.length == 0) {
        this.EchoList = []
        sessionStorage.setItem('EchoList', JSON.stringify(this.EchoList))
        this.InstallConfig.ShowName = false;
      } else {
        this.EchoList = [1]
        sessionStorage.setItem('EchoList', JSON.stringify(this.EchoList))
        this.InstallConfig.ShowName = true;
      }
    },
    treeChangeTwo(data, node, elem) {
      console.log(node.checkedKeys);
      if (node.checkedKeys.length == 0) {
        // this.EchoListTwo = []
        // sessionStorage.setItem('EchoListTwo', JSON.stringify(this.EchoListTwo))
        this.InstallConfig.ShowStep = false;
        this.InstallConfig.ShowTip = false;
      } else if (node.checkedKeys.length == 1) {
        if (node.checkedKeys[0] == 1) {
          // this.EchoListTwo = [1]
          // sessionStorage.setItem('EchoListTwo', JSON.stringify(this.EchoListTwo))
          this.InstallConfig.ShowTip = false;
          this.InstallConfig.ShowStep = true;
        }
        if (node.checkedKeys[0] == 0) {
          // this.EchoListTwo = [0]
          // sessionStorage.setItem('EchoListTwo', JSON.stringify(this.EchoListTwo))
          this.InstallConfig.ShowStep = false;
          this.InstallConfig.ShowTip = true;
        }
      } else if (node.checkedKeys.length == 3) {
        // this.EchoListTwo = [1,0]
        // sessionStorage.setItem('EchoListTwo', JSON.stringify(this.EchoListTwo))
        this.InstallConfig.ShowStep = true;
        this.InstallConfig.ShowTip = true;
      }
    },
    // 数据回传
    Sub() {
      this.$emit("ok", this.InstallConfig);
    },
  },
});
</script>
  
<style lang="less" scoped>
/deep/.el-icon {
  display: none;
}
/deep/.el-tree-node__label {
  font-size: 18px;
}
/deep/.el-tree-node__content {
  padding: 4px 0;
}
.tree-1 {
  margin-left: 20px;
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f1f5;
}
.tree-2 {
  margin-left: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
}
</style>